<template>
  <div class="app-container">
    <div class="filter-container">

    <el-date-picker
      v-model="value7"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions2">
    </el-date-picker>


      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-tag type="success" @click.native="toPo(0)">全部用户</el-tag>
    </div>

    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
      style="width: 100%">
      <el-table-column align="center" label="ID" width="65">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column width="150" align="center" label="上级">
        <template slot-scope="scope">
          <span>{{scope.row.pname}}</span>
        </template>
      </el-table-column> -->

      <el-table-column min-width="110" label="昵称">
        <template slot-scope="scope">
          <span >{{scope.row.nickname}}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="110" label="下级数">
        <template slot-scope="scope">
          <span >{{scope.row.regC}}<el-tag type="success" @click.native="toPo(scope.row.id)">查看下级</el-tag></span>
        </template>
      </el-table-column>
      <el-table-column min-width="110" label="点击数">
        <template slot-scope="scope">
          <span >{{scope.row.clickC}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="110" label="分享数">
        <template slot-scope="scope">
          <span >{{scope.row.shareC}}</span>
        </template>
      </el-table-column>
      

    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <el-dialog title="查看下级" :visible.sync="dialogFormVisible"  width="80%">
      
    </el-dialog>
  </div>
</template>

<script>
import { getTJList, delUser, adminEditUser } from "@/api/user";
import waves from "@/directive/waves"; // 水波纹指令

export default {
  name: "complexTable",
  directives: {
    waves
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: "+id",
        uid: ""
      },

      temp: {
        id: undefined,
        importance: 1,
        remark: "",
        timestamp: new Date(),
        title: "",
        type: "",
        status: "published"
      },
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "Edit",
        create: "Create"
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "change" }
        ],
        nickname: [
          { required: true, message: "昵称不能为空", trigger: "change" }
        ]

        // title: [
        //   { required: true, message: "title is required", trigger: "blur" }
        // ]
      },
      downloadLoading: false,
      uid: "",
      value7: [],
      pickerOptions2: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.uid =
        typeof this.$route.query.id !== "undefined" ? this.$route.query.id : "";

      this.listQuery.uid = this.uid;
      this.getList();
    });
  },
  methods: {
    getList() {
      this.listLoading = true;
      console.log(this.listQuery);
      getTJList(this.listQuery).then(response => {
        //console.log(response);
        this.list = response.data.item;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    handleFilter() {
      console.log(this.value7);
      let startTime, endTime;
      if (this.value7[0]) {
        var d = new Date(this.value7[0]);
        startTime =
          d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
      }

      if (this.value7[1]) {
        var d = new Date(this.value7[1]);
        endTime =
          d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
      }

      this.listQuery.start = startTime;
      this.listQuery.end = endTime;
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: "删除成功",
        type: "success"
      });
      row.status = status;
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        importance: 1,
        remark: "",
        timestamp: new Date(),
        title: "",
        status: "published",
        type: ""
      };
    },
    handleCreate() {
      this.resetTemp();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },

    handleUpdate(row) {
      this.temp = Object.assign({}, row); // copy obj
      this.temp.timestamp = new Date();
      this.dialogStatus = "update";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    toPo(id) {
      //this.$router.push("/user/statistics?id=" + id);
      this.listQuery.uid = id;
      this.getList();
    }
  }
};
</script>

<style scoped>
.el-pagination {
  width: 75%;
  margin: 0 auto;
  min-width: 280px;
  overflow: hidden;
}
.el-select {
  display: none !important;
}
@media screen and (min-width: 321px) and (max-width: 769px) {
  .el-date-editor{
  float: left;
  width: 71%
}
.el-button{
  float: left;
  margin: 0 0 0 6px;
}
.el-tag{
    width: 100%;
    margin: 10px auto;
    text-align: center;
}


}
@media screen and (max-width: 320px) {
  .el-date-editor{
  float: left;
  width: 65%
}
.el-button{
  float: left;
  margin: 0 0 0 5px;
}
.el-tag{
    width: 100%;
    margin: 10px auto;
    text-align: center;
}


}
</style>
